<template>
  <bs-dialog :title="$t('标签设置')" :visible.sync="editor" size="mini" @closed="doCloseEdit" @opened="loadTreeData" class="deviceDialog">
    <template slot="main">
      <el-form :model="editorForm" ref="editorFormRef" size="small" :show-message="false" :hide-required-asterisk="true" :status-icon="false">
        <input v-model="editorForm.ids" type="hidden" />
        <el-form-item :label="$t('标签')" prop="tagIds" label-width="70px">
          <el-select-tree
              :placeholder="$t('请选择标签')"
              :multiple="true"
              :props="props"
              :data="treeData"
              :disabled-values="disabledValues"
              :check-strictly="checkStrictly"
              v-model="editorForm.tagIds"
              @change="changeSelectTree"
          ></el-select-tree>
        </el-form-item>
      </el-form>
    </template>

    <template slot="footer">
      <bs-confirm-button-icon @click.native="doSave"></bs-confirm-button-icon>
      <bs-cancel-button-icon @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import ScreenApi from '@/api/screen'
export default {
  name: 'ScreenIndexDialog',
  data() {
    return {
      editor: false,
      editorForm: {
        ids: [],
        tagIds: []
      },
      props: {
        value: 'id',
        children: 'children',
        label: 'name'
      },
      disabledValues: [],
      treeData: [],
      checkStrictly: false,
      queryData: {}
    }
  },
  created() {
    this.$eventBus.$on('showAddScreenIndexDialog', this.show);
  },
  beforeDestroy() {
    this.$eventBus.$off('showAddScreenIndexDialog');
  },
  methods: {
    resetForm() {
      this.editorForm.tagIds = []
    },
    // 加载标签树菜单
    async loadTreeData() {
      const res = await ScreenApi.loadTagTree({})
      if(res) {
        this.treeData = res.filter(v => {
            return v.name !== '内置标签'
        })
      }
    },
    // 显示
    show(tagIds, ids, queryData) {
      // 标签回显
      if(tagIds) {
        this.editorForm.tagIds = tagIds
      }
      this.editorForm.ids = ids
      this.queryData = queryData
      this.editor = true
    },
    // 关闭
    doCloseEdit: function () {
      this.resetForm()
      this.$refs.editorFormRef.clearValidate()
      this.editor = false
    },
    // 保存表单
    async doSave() {
      this.$refs.editorFormRef.clearValidate()
      this.$refs.editorFormRef.validate(async valid => {
        if (valid) {
          const res = await ScreenApi.addDeviceScrennTag({ids: this.editorForm.ids, tagIds: this.editorForm.tagIds, ...this.queryData})
          if(res) {
            this.editor = false
            this.$eventBus.$emit('doList', {current: 1})
            this.$success('upd')
          }
        } else {
          let index = 0
          this.$refs.editorFormRef.fields.forEach(field => {
            if(field.validateMessage) {
              if(index === 0) {
                console.log(field.validateMessage)
                this.$message.error(field.validateMessage)
                this.validateMsg=[]
              }
              index ++
            }
          })
          return
        }
      })
    },
    changeSelectTree(val) {
      this.editorForm.tagIds = val
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form {
  padding: 30px 10px 0 15px;
}
::v-deep .el-dialog {
  width: 350px;
  height: 200px;
}
::v-deep .el-select-tree {
    width: 240px;
}
</style>
